<template>
	<view>
		<dsl-navbar title="我的员工" isBack bgTopImg="white" :titleRight="titleRight" titleRightStyle='#00D88F'
			@rightForm='rightForm'>
		</dsl-navbar>
		<view style="color: #AAAAAA;" class="align-center padding justify-between bg-white animation-fade">
			<view class="sarech rowsc align-center">
				<image src="/static/icon/icon_sysous.png" mode="widthFix" style="width: 30rpx;" class="margin-right-xs">
				</image>
				<input type="text" value="" placeholder="请输入" v-model="username" />
			</view>

			<view class="align-center  text-gray">
				<view :class="{'animation-scale-up text-cpcolor':sort==1}" @click="sort=1">升序</view>
				/
				<view :class="{'animation-scale-up text-cpcolor':sort==2}" @click="sort=2">降序</view>
				<!-- <text class="margin-left" style="color: #00D88F;">筛选 <text class="cuIcon-unfold margin-left-xs"></text> -->
				</text>
				<image src="/static/user/modules/imgrili.png" mode="widthFix" style="width: 28rpx;" class="margin-left"
					:class="{'animation-scale-up':isTimeOrder}" @click="isTimeOrder = !isTimeOrder"></image>
			</view>
		</view>
		<view style="z-index: 999;position: relative;" class="animation-slide-top" v-if="isTimeOrder">
			<view class="bg-white">
				<view class="flex align-center rowsa">
					<view class="screening_classify " :class="{'animation-scale-up':t}" @click="t=true">
						<picker mode="date" :value="date1" start="1900-09-01" end="2090-09-01" @change="DateChange">
							<view class="picker">
								{{date1 ||'请选择开始时间'}}
							</view>
						</picker>
					</view>
					<view>-</view>
					<view class="screening_classify " :class="{'animation-scale-up':!t}" @click="t=false">
						<picker mode="date" :value="date2" start="1015-09-01" end="2090-09-01" @change="DateChange2">
							<view class="picker">
								{{date2 || '请选择结束时间'}}
							</view>
						</picker>
					</view>
				</view>
				<view class=" solid-top rowsa text-center ">
					<view class="solid-right padding" style="width: 50%;" @click="isTimeOrder = false">取消</view>
					<view class="text-red padding" style="width: 50%;" @click="submitSeach()">
						<view hover-class="animation-scale-up">确定</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="staffList &&staffList.length !=0">
			<view class="staff_body padding animation-scale-up" v-for="(item,index) in staffList" :key="index"
				:class="{'bg-gray':index == num}" @click="num = index">
				<view class="flex justify-between">
					<view class="flex">
						<image
							:src="item.avatar?item.avatar:'https://img0.baidu.com/it/u=1489807627,808259306&fm=26&fmt=auto'"
							mode="" class="staff_image"></image>
						<view class="margin-left-sm">
							<view class="align-center">
								<view class="staff_name">{{item.username ||'暂无'}}</view>
							</view>
							<view class="margin-top-sm ">
								<text class="staff_sex">{{item.gender==1?'男':'女'}}</text>
								<text class="margin-lr">{{item.birthday}}岁</text>
							</view>
						</view>
					</view>
					<!-- <view>
						<view class="align-center">
							<image src="/static/icon/imgxiaoxi-2.png" mode="widthFix" style="width: 30rpx;"></image>
							<image src="/static/icon/imgdianhua-1.png" mode="widthFix" style="width: 30rpx;"
								class="margin-left-xl"></image>
						</view>
					</view> -->
				</view>
				<view class="text-sm margin-top flex flex-wrap" style="color: #434343;">
					<view class="margin-right-sm margin-bottom-sm">待面试：<text class="text-red">{{item.status1}}</text>
					</view>
					<view class="margin-right-sm margin-bottom-sm">待入职：<text class="text-red">{{item.status2}}</text>
					</view>
					<view class="margin-right-sm margin-bottom-sm">已入职：<text class="text-red">{{item.status3}}</text>
					</view>
					<view class="margin-right-sm margin-bottom-sm">离职：<text class="text-red">{{item.status4}}</text>
					</view>
					<view class="margin-right-sm margin-bottom-sm">未通过：<text class="text-red">{{item.status5}}</text>
					</view>
				</view>
				<view class="justify-end" @click.stop="staffDetail(item)">
					<view class="submit">
						查看绩效
					</view>
					<view class="submit margin-left" @click.stop="deleteMen(item)" v-if="titleRight == '完成'">
						员工转移
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<moreLoading></moreLoading>
		</view>
		<!-- <view class="submit_bottom rowsb align-center"> -->
		<!-- <view class="align-center" @click="isI = !isI">
				<image :src="isI?'/static/icon/icon-weixuanzhong.png':'/static/icon/icon-xuanzhong.png'" mode="widthFix"
					style="width: 30rpx;"></image>
				<text style="color: #A2A2A2;" class="margin-left-sm">
					{{!isI?'全选':'取消全选'}}
				</text>
			</view> -->
		<!-- '<view class="submit2">
				删除
			</view> -->
		<!-- </view> -->

		<view>

		</view>

		<view class="issue_button" @click="$tools.push('/pages/user/modules/share?num='+1)">
			添加
		</view>
		
		
	</view>
</template>

<script>
	import {
		getmyStaff,
		staffDelete
	} from '@/common/path.js'
	export default {
		data() {
			return {
				titleRight: '编辑',
				pageData: 1, //第一页
				staffList: [], //列表
				username: '', //搜索
				sort: 1, //升序
				isTimeOrder: false, //默认不打开时间筛选
				date1: "", //开始时间
				date2: '', //结束时间
				time: '', //时间筛选
				t: false,
				num: 999
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {
			this.staffList = []
			this.pageData = 1
			this.getmyStaff()
		},
		watch: {
			// isI(e) { //是否全选
			// 	this.staffList.forEach(item => {
			// 		item.i = false
			// 	})
			// 	if (e) {
			// 		this.staffList.forEach(item => {
			// 			item.i = true
			// 		})
			// 	}
			// },


			sort() { //升序/降序
				this.pageData = 1
				this.getmyStaff()
			},
			username(i) { //搜索功能
				this.staffList = []
				this.pageData = 1
				this.getmyStaff()
			},
			time() { //根据时间筛选
				this.staffList = []
				this.pageData = 1
				this.getmyStaff()
			}
		},
		onShow() {

		},
		methods: {
			
			DateChange(e) {
				// console.log(e.detail.value);
				this.date1 = e.detail.value
				this.getenterprise()
			},
			DateChange2(e) {
				this.date2 = e.detail.value
				this.getenterprise()
			},
			
			//移除
			deleteMen(item) {
				let list = []
				let v = this
				this.staffList.forEach(item01 => {
						list.push(item01.username)
				})

				let index = 0; //选择转移的员工下标				
				uni.showActionSheet({
					itemList: list,
					success: function(res) {
						index = res.tapIndex
						let id = item.id //选择删除的id
						let ids = v.staffList[index].id //移动到谁的身上
						let data = {
							userDelete:id,
							userShift:ids
						}
						console.log('[删除参数]',JSON.stringify(data));
						v.staffDelete(data)
					}
				});
				

			},

			//编辑
			rightForm() {
				if (this.titleRight == '编辑') {
					this.titleRight = '完成'
				} else {
					this.titleRight = '编辑'
				}
			},

			//员工删除
			staffDelete(data) {
				this.Http.POST(staffDelete, data).then(res => {
					if (res.code == 1) {
						this.pageData  = 1
						this.getmyStaff()
						this.$tools.showToast('操作成功')
					} else {
						this.$tools.showToast(res.msg)
					}
				})
			},

			//根据时间查询
			submitSeach() {
				if (!this.date1) {
					this.$tools.showToast('请选择开始时间')
					return
				}
				if (!this.date2) {
					this.$tools.showToast('请选择结束时间')
					return
				}
				this.time = this.date1 + ',' + this.date2
			},
			//我的员工
			getmyStaff() {
				let data = {
					page: this.pageData,
					listrows: 30,
					username: this.username,
					sort: this.sort, //升序降序
				}
				this.Http.POST(getmyStaff, data)
					.then((res) => {
						if (res.code == 1) {
							console.log('[我的员工]', res);
							if (this.pageData == 1) {
								res.data.forEach(item => {
									item.i = false
								})
								this.staffList = res.data

							} else {
								this.staffList.push(...res.data)
								this.staffList.forEach(item => {
									item.i = false
								})
							}
						}
					})
			},
			//触底分页
			onReachBottom(e) {
				this.pageData++
				this.getmyStaff()
			},
		},
		computed: {},
		components: {}
	}
</script>

<style>
	.sarech {
		width: 404rpx;
		height: 67rpx;
		background: #EFEFEF;
		opacity: 1;
		border-radius: 35rpx;
	}

	page {
		background: #F7F6FA;
	}

	.staff_body {
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 11rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.staff_image {
		width: 105rpx;
		height: 105rpx;
		background: #D8D8D8;
		border-radius: 99rpx;
	}

	.staff_name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #434343;
		opacity: 1;
	}

	.staff_fule {
		width: 197rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #434343;
		opacity: 1;
	}

	.staff_sex {
		font-size: 26rpx;
		font-family: PingFang SC;
	}

	.staff_table {
		width: 140rpx;
		height: 30rpx;
		border: 1rpx solid #2B9AFF;
		border-radius: 20rpx;
		color: #2B9AFF;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #309EFF;
		opacity: 1;
		line-height: 30rpx;
		text-align: center;
	}

	.submit {
		width: 126rpx;
		height: 50rpx;
		background: #00D88F;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 50rpx;
		color: white;
		font-size: 24rpx;
		text-align: center;
	}

	.submit_bottom {
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		background-color: white;
		left: 0;
		right: 0;
	}

	.submit2 {
		width: 100%;
		height: 70rpx;
		background: #00D88F;
		opacity: 1;
		line-height: 70rpx;
		color: white;
		border-radius: 99rpx;
		text-align: center !important;
	}

	.text-cpcolor {
		color: #00D88F;
	}

	/* 	// 筛选
 */
	.screening_classify {
		height: 50rpx;
		background: #999999;
		opacity: 1;
		text-align: center;
		line-height: 50rpx;
		border-radius: 99rpx;
		color: white;
		font-size: 24rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin: 10rpx;
	}

	.issue_button {
		background-color: #00D88F;
		border-radius: 99rpx;
		height: 100rpx;
		width: 100rpx;
		color: white;
		line-height: 100rpx;
		text-align: center;
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
	}
</style>
